/* Для стилизации скроллбара в CSS используются псевдоэлементы 
-webkit-scrollbar (для Chrome, Safari, Edge) и свойства scrollbar-color/width (для Firefox). 
Основные компоненты — это полоса (track) и ползунок (thumb), которым задают цвет, ширину и скругление.  */
/* Пример универсальной настройки (стильный темный скролл):
css */

/* 1. Стили для Firefox */
/* html { */
* {
  scrollbar-width: thin; /* Тонкий скроллбар (auto, thin, none) */
  scrollbar-color: var(--bordovii) var(--rozovii); /* Цвет ползунка и трека */
}

/* 2. Стили для Chrome, Edge, Safari */
/* Ширина всего скроллбара */
::-webkit-scrollbar {
  width: 10px; /* Вертикальный */
  height: 10px; /* Горизонтальный */
}

/* Трек (фон) скроллбара */
::-webkit-scrollbar-track {
  background: var(--rozovii);
  border-radius: 5px;
}

/* Ползунок (бегунок) */
::-webkit-scrollbar-thumb {
  background: var(--bordovii);
  border-radius: 5px;
}

/* Ползунок при наведении */
::-webkit-scrollbar-thumb:hover {
  background: var(--bordovii);
}
/* Основные псевдоэлементы (-webkit):
::-webkit-scrollbar: задает общую ширину/высоту.
::-webkit-scrollbar-track: фон под ползунком.
::-webkit-scrollbar-thumb: перетаскиваемый индикатор.
::-webkit-scrollbar-button: кнопки направления.  */

/* Как убрать скролл, оставив функциональность:
css */

/* .element::-webkit-scrollbar { width: 0; }  */
/* Chrome/Safari */
/* .element { scrollbar-width: none; }  */
/* Firefox */

/* Ключевые свойства:
border-radius: скругление углов ползунка.
background-color: изменение цвета фона или ползунка.
box-shadow: добавление объема. 
Чтобы применить стили только к определенному блоку, 
используйте селектор: .my-container::-webkit-scrollbar {...} */